<template>
	<!-- 随堂测试 -->
	<view class="page">
		<view class="flex benben-position-layout flex flex-wrap align-center flex_0_ibhf"
			:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
			<view class='flex flex-wrap align-center justify-between flex-sub fd0_0_ibhf'>
				<view class='flex flex-wrap align-center fd0_0_c0_ibhf' @tap.stop="handleJumpDiy" data-type="back"
					data-url="1">
					<text class='fu-iconfont2  fd0_0_c0_c0_ibhf'>&#xE794;</text>
				</view>
				<view class='flex flex-wrap align-stretch justify-center'>
					<text class='fd0_0_c1_c0_ibhf'>题目详情</text>
				</view>
				<view class='flex flex-wrap align-center justify-end fd0_0_c0_ibhf'>
				</view>
			</view>

		</view>
		<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
		<view class="hp"></view>
		<view class="zt">
			<view @tap.stop='checktab(1)' class="left" :class="tab==1?'se':''"> 已回答</view>
			<view @tap.stop='checktab(2)' class="right" :class="tab==2?'se':''">未回答 </view>
		</view>
		<view class="num" v-if="tab==1"> 已答：<text style="color: #1C5EFC;">{{join}}</text>人 </view>
		<view class="num" v-else> 未回答：<text style="color: #F93335;">{{not_join}}</text>人 </view>
		<!-- 单多选判断 -->
		<view class="lists">
			<view class="items " style="margin: 32rpx 0;" v-if="tab==1 && (type==1 || type==2 || type==3)" v-for="(item,index) in list" :key="index" @tap.stop="jump(item)">
				<view class="top flex">
					<view class="users flex">
						<view class="">
							<image class="checkimg " @tap.stop="checkitem(index)" v-if="tab==1" :src='item.check ?STATIC_URL+"open.png":STATIC_URL+"close.png"' mode=""></image>
						</view>
						<view class="name flex">{{item.label}} 、<text v-html="item.value"></text> </view>
					</view>
					<view class="score">
						<view class="zt">{{item.userlength}}人</view>
					</view>
				</view>
				<view class="" v-if="item.userlength>0 && item.check">
					<view class="users flex" style="margin: 26rpx 0 52rpx 0;" v-for="(items,indexs) in item.user_list" :key='indexs'>
						<image class="imgs" :src='items.avatar?items.avatar:STATIC_URL+"LOGO.png"' mode="aspectFill"></image>
						<view class="name"> {{items.real_name}} </view>
					</view>
				</view>
			</view>
			
		</view>
		<!-- 简答题 -->
		<view class="lists" v-if="tab==1 && (type==4|| type==5)">
			<view class="item" v-for="(item2,index2) in list" :key='index2' >
				<view class="user">
					<!-- <image class="checkimg" @tap.stop="checkitem(index)" :src='item.check?STATIC_URL+"1671.png":STATIC_URL+"16002.png"' mode=""></image> -->
					<image class="imgs"  :src='item2.avatar?item2.avatar:STATIC_URL+"1609.png"' mode="aspectFill"></image>
					<view class="name"> {{item2.real_name}} </view>
				</view>
				<view class="content-box">
					<view class="content-wrapper">
						<view class="names" v-html="item2.answer"></view>
					</view>
				</view>
			</view>
			
		</view>
		
		<view class="lists" v-if="tab==2">
			<view class="items" v-for="(student,key) in studentlist" :key='key' v-if="studentlist.length>0 && isup">
				<view class="users flex" style="margin: 26rpx 0 52rpx 0;">
					<image class="imgs" :src='student.avatar?student.avatar:STATIC_URL+"1609.png"' mode="aspectFill"></image>
					<view class="name"> {{student.real_name}} </view>
				</view>
			</view>
		</view>
		<view v-if="((list.length==0 &&tab==1) || (studentlist.length==0 &&tab==2))&& isup ">
			<slot>
				<view class="public-page-empty">
					<image src='/static/global/order.png'></image>
					<view class="txt">暂无数据</view>
				</view>
			</slot>
		</view>
		<view :style="{height: '190rpx'}"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				allcheck: false, //是否全选
				checknum: '', //选中的数量
				uuid: '', //选中的id
				"pickerDiy1763618496046": false,
				"corelist": [],
				"checkname": "",
				checkid: '',
				tab: 1,
				name: '',
				aid:'',//活动id
				type:'',//题型 radio 1 selected 2 torf 3 cloze 5  4
				question_id:'',//问题id
				not_join:'',//未参加
				join:'',//已参加
				isup:false,
				studentlist:[],//未参加学生列表
			}
		},
		onLoad(option) {
			this.name = option.name
			this.aid=option.aid
			this.type=option.types
			this.join=option.join
			this.not_join=option.not_join
			this.question_id=option.question_id
			this.getscore()
			this.getlist()
		},
		methods: {
			async getlist(){
				 this.isup = false
				let datadatum = await this.$api.get(global.apiUrls.post6926d72123f87, {
						classroomactivitieslog_id:this.aid,
						question_id:this.question_id
				});
				//
				if (datadatum.data.code != 1) {
					this.$message.info(datadatum.data.msg);
					return
				}
				 this.isup = true
				let infodatum = datadatum.data;
				if(this.type==1 || this.type==2 || this.type==3){
					this.list = infodatum.data.map(item=>{
						item.check=false
						item.userlength=item.user_list.length
						return item
					})
				}else{
					this.list=infodatum.data.map(item=>{
						item.answer=JSON.parse(item.answer)
						if(this.type==5){
							item.answer=item.answer.join(',')
						}
						return item
					})
				}
				
				console.log(this.list)
			},
			async getstatus(){
				this.isup = false
				let datadatum = await this.$api.post(global.apiUrls.post6927ebb961bbc, {
						classroomactivitieslog_id:this.aid,
						question_id:this.question_id
				});
				if (datadatum.data.code != 1) {
					this.$message.info(datadatum.data.msg);
					return
				}
				 this.isup = true
				let infodatum = datadatum.data;
				this.studentlist=infodatum.data
			},
			checktab(index) {
				this.tab = index
				if(this.tab==1){
					this.getlist()
				}else{
					this.getstatus()
				}
			},
			openitem(item) {
				this.uuid = item.aid
				this.pickerDiy1763618496046 = true
			},
			openall() {
				let aid = ''
				this.list.map(item => {
					if (item.check) {
						aid += item.aid + ','
					}
				})
				if (aid) {
					this.uuid = aid
					this.pickerDiy1763618496046 = true

				} else {
					this.$message.info('请选择要评分的学生')
				}
			},
			getscore() {
				const arr2 = [...Array(21).keys()].map(i => ({
					name: (i - 10).toString()
				}));
				this.corelist = arr2
			},
			// 全选
			checkall() {
				this.allcheck = !this.allcheck
				let num = 0
				this.list.map(item => {
					item.check = this.allcheck
					if (item.check) {
						num++
					}
				})
				this.checknum = num
			},
			// 单个选择
			checkitem(index) {
				this.list[index].check = !this.list[index].check
				this.checkzt()
			},
			checkzt() {
				let st = true
				let num = 0
				this.list.map(item => {
					if (!item.check) {
						st = false
					} else {
						num++
					}
				})
				this.allcheck = st
				this.checknum = num
			},
			jump(item) {
				if (this.name == '随堂测试' && this.tab == 1) {
					uni.navigateTo({
						url: '/pages/activity/dtxq/dtxq'
					})
				}
			}

		}
	}
</script>

<style lang="scss" scoped>
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: #ffffff;
		background-size: 100% auto;

		.hp {
			width: 100%;
			height: 24rpx;
			background-color: #F3F4F8;
		}

		.flex_0_ibhf {
			width: 750rpx;
			height: 88rpx;
			overflow: hidden;
			z-index: 10;
			top: 0rpx;
			background: #fff;
			background-size: 100% auto !important;

			.fd0_0_ibhf {
				padding: 0rpx 32rpx 0rpx 32rpx;

				.fd0_0_c1_c0_ibhf {
					font-size: 36rpx;
					font-weight: 700;
					color: #333333;
					line-height: 50rpx;
				}
			}

			.fd0_0_c0_ibhf {
				width: 120rpx;

				.fd0_0_c0_c0_ibhf {
					font-size: 36rpx;
					color: #333;
				}
			}
		}
	}

	.zt {
		width: 100%;
		height: 128rpx;
		text-align: center;
		justify-content: center;
		display: flex;
		padding: 36rpx 0;

		.left,
		.right {
			width: 164rpx;
			height: 56rpx;
			text-align: center;
			line-height: 56rpx;
			color: #333333;
			border-radius: 8rpx 0px 0px 8rpx;
			border: 1px solid #145EFD;
			background-color: #FFFFFF;
			border: 1rpx solid #DADADC;
		}

		.right {
			border-radius: 0px 8rpx 8rpx 0px;
		}

		.se {
			border: none;
			background: #145EFD;
			color: #ffffff;
		}
	}

	.num {
		padding: 0 24rpx;
		width: 100%;
		height: 96rpx;
		background: #FBFBFB;
		font-size: 32rpx;
		line-height: 96rpx;
		color: #333;
	}

	.lists {
		padding-bottom: 36rpx;
		background-color: #ffffff;

		.se {
			background-color: #F2F7FF;
		}

		.zt {
			margin-left: auto;
			color: #29BE9E;
			color: #999999;
		}

		.pf {
			margin-left: auto;
			color: #145EFD;
		}

		.items ,
		.item{
			align-items: center;
			width: 100%;
			// height: 132rpx;
			padding: 0 24rpx;

			.users {
				align-items: center;
				width: 85%;
			}

			.checkimg {
				margin-right: 16rpx;
				width: 24rpx;
				height: 24rpx;
				background: #FFFFFF;
				border-radius: 6rpx;
			}

			.imgs {
				width: 72rpx;
				height: 72rpx;
				border-radius: 50%;
				margin: 0 32rpx 0 24rpx;
			}

			.name {
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 400;
				font-size: 32rpx;
				color: #333333;
				font-style: normal;
				text-transform: none;
			}

			.time {
				width: 140rpx;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 400;
				font-size: 26rpx;
				color: #666666;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}

			.score {
				margin-left: auto;
			}
		}
		.item{
			padding: 36rpx 24rpx;
			// margin-bottom: 52rpx;
			display: flex;
		}
	}

	.jf_flex_2_ibhf {
		width: 750rpx;
		height: 190rpx;
		overflow: hidden;
		z-index: 10;
		bottom: calc(0rpx + var(--window-bottom));
		background: #FFFFFF;
		box-shadow: 0rpx -1rpx 0rpx 1rpx #EEEEEE;
		padding: 0 24px;

		.jf_fd2_0_c0_ibhf {
			width: 36rpx;
			height: 36rpx;
			border-radius: 0rpx;
			margin: 0rpx 12rpx 0rpx 0rpx;
		}

		.jf_fd2_0_c1_ibhf {
			color: #666666;
			font-size: 28rpx;
			font-weight: 400;
			line-height: 40rpx;
			text-align: left;
			font-style: normal;
		}

		.checknum {

			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 400;
			font-size: 28rpx;
			color: #1C5EFC;
			line-height: 40rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}

		.jf_fd2_1_ibhf {
			border-radius: 42rpx;
			width: 257rpx;
			line-height: 84rpx;
			font-size: 24rpx;
			background: linear-gradient(270deg, #145EFD 0%, #6E9CFF 100%);
			color: #fff;
			height: 84rpx;
			margin: 0rpx 0rpx 0rpx auto;
		}
	}

	.zy_picker4_0_ibhf {
		background-color: #ffffff;
		padding: 0rpx 32rpx 0rpx 32rpx;
		line-height: 88rpx;
		border-bottom: 1px solid #eee;

		.zy_picker4_0_c0_ibhf {
			color: var(--benbenFontColor2);
		}

		.zy_picker4_0_c1_ibhf {
			color: var(--benbenFontColor0);
		}

		.zy_picker4_0_c2_ibhf {
			color: var(--benbenFontColor4);
		}
	}
	.content-box{
		width: 610rpx;
		min-height: 228rpx;
		// background-color: red;
		background-image: url("@/static/images/tlbj2.png");
		// background-size: 105rpx 43rpx;
		// background-repeat: no-repeat;
		// background-color: red;
		position: relative;
		margin-left: 17rpx;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		// background-color: pink;
		box-shadow: 0px 0px 20rpx 1rpx rgba(148,167,204,0.16);
		.content-wrapper {
		  position: relative;
		  z-index: 2;
		  padding: 24rpx;
		  display: flex;
		  flex-direction: column;
		}
		.tlbj{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			// box-shadow: 0px 0px 20px 1px rgba(148,167,204,0.16);
		}
		.infos{
			// box-shadow: 0px 0px 20px 1px rgba(148,167,204,0.16);
			padding:24rpx 37rpx;
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 3;
			color: #999999;
			border-radius: 10rpx;
			
			.names{
				
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
				line-height: 45rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
			.bttom{
				margin-top: 48rpx;
			
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
				line-height: 40rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
				.zt{
					margin-left: auto;
					color:#29BE9E;
				}
				.pf{
					margin-left: auto;
					color: #145EFD;
				}
			}
		}
	}
	.shadow{
		box-shadow: 0px 0px 20px 1px rgba(148,167,204,0.16);
	}
	.public-page-empty {
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			padding: 120upx 0 0 0;
		
			image {
				width: 300rpx;
				height: 300rpx;
			}
		
			.txt {
				font-size: 28upx;
				color: $uni-text-color;
				text-align: center;
				line-height: 100upx;
				color: var(--benben-loading-color, #999999);
			}
		
			.loadTips {
				line-height: 30upx;
			}
		
			.btn {
				width: 260upx;
				height: 78upx;
				line-height: 78upx;
				background: linear-gradient(309deg, rgba(254, 49, 0, 1) 0%, rgba(255, 90, 16, 1) 100%);
				opacity: 1;
				border-radius: 44upx;
				font-size: 28upx;
				color: #fff;
				text-align: center;
				margin-top: 100upx;
			}
		}
</style>
